<template>
  <div class="search-form search-form-style">
    <div class="search-form-wrapper">
      <div ref="contentRef" class="search-form-content">
        <div class="search-form-item">
          <FormPro
            v-model="formModel"
            layout="inline"
            :size="size"
            :root-row="rootRow"
            :show-colon="showColon"
            :label-width="labelWidth"
            :form-filed-list="!showBtns ? formFiledListMin : formFiledList"
            :hide-label="hideLabel"
            :label-align="labelAlign"
            auto-label-width
          >
            <template
              v-for="(item, name) in $slots"
              :key="name"
              #[name]="dataObj"
            >
              <slot :name="name" v-bind="dataObj || {}"></slot>
            </template>
          </FormPro>
        </div>
        <div v-if="showBtns" class="search-form-edit">
          <div
            class="search-form-buttons"
            :style="{ flexDirection: buttonDirection }"
          >
            <Button
              type="primary"
              :size="size"
              :style="getSearchBtnStyles()"
              @click="handleBtnClick('search')"
            >
              查询
            </Button>
            <Button
              v-if="showReset"
              :size="size"
              @click="handleBtnClick('reset')"
            >
              重置
            </Button>
          </div>
        </div>
        <div
          v-if="$slots.extra"
          :style="{ marginLeft: showBtns ? '8px' : 0 }"
          class="search-form-extra"
        >
          <Space>
            <slot name="extra"></slot>
          </Space>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, defineProps, defineEmits, unref, computed } from 'vue';
  import lodash from 'lodash';
  import { Button, Space } from '@arco-design/web-vue';
  import FormPro from '../FormPro/index.vue';
  import { searchFormProps } from './props';
  import './index.less';

  const { cloneDeep } = lodash;

  const props = defineProps(searchFormProps);
  const emit = defineEmits(['update:modelValue', 'change', 'handleBtnClick']);

  const handleBtnClick = (type: 'search' | 'reset' | string) => {
    emit('handleBtnClick', type);
  };

  const formFiledListMin = computed(() => {
    const fields = cloneDeep(props.formFiledList);
    if (props.showButton) {
      return fields;
    }
    fields.forEach((item) => {
      if (!item.events) {
        item.events = {};
      }

      if (!item.events?.change) {
        item.events.change = () => {
          handleBtnClick('search');
        };
      }
    });
    return fields;
  });

  const showBtns = computed(() => {
    return props.showButton;
  });

  const formModel = ref<Record<string, any>>({});
  watch(
    () => props.modelValue,
    (newVal) => {
      if (newVal) {
        formModel.value = newVal;
      } else {
        formModel.value = {};
      }
    },
    {
      immediate: true,
    }
  );

  watch(
    () => formModel,
    () => {
      emit('update:modelValue', unref(formModel));
      emit('change', unref(formModel));
    },
    {
      immediate: true,
    }
  );

  const getSearchBtnStyles = () => {
    let obj: any = {};
    if (['initial', 'row'].includes(props.buttonDirection)) {
      obj = {
        marginBottom: '0',
        marginRight: '8px',
      };
    }

    if (['column'].includes(props.buttonDirection)) {
      obj = {
        marginBottom: '8px',
        marginRight: '0',
      };
    }

    if (!props.showReset) {
      obj = {};
    }

    return obj;
  };

  const contentRef: any = ref(null);
</script>
